<template>
  <div>
      <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
        <RealTimeCom></RealTimeCom>
        <VideoMonitorCom></VideoMonitorCom>
        <ThingCom></ThingCom>
        <NoticeCom></NoticeCom>
        <ReportRoadCom></ReportRoadCom>
        <ToolBoxCom></ToolBoxCom>
        <UserManagement></UserManagement>
        <div class="flex-grow" />
        <!-- 让下面的组件右对齐 -->
        <SearchThingCom></SearchThingCom>
        <InformationCom></InformationCom>
      </el-menu>
      <OpenMap />
      <PopupCom></PopupCom>
      <CatalogCom></CatalogCom>
      <ManageUserPopup v-show="showManageUser" />
      <AddUserByAdmin v-show="showAddUserByAdmin" />
      <ChangeUserByAdmin v-show="showChangeUserByAdmin" />
      <AddNotice></AddNotice>
    </div>
  </div>
  <!-- <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-header>
        <div class="header">光谷智慧交通</div>
      </el-header>
      <el-main>
        <OpenMap />
        <PopupCom></PopupCom>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
    <el-aside width="200px">Aside</el-aside>
  </el-container>
  -->
</template>

<script setup>
import OpenMap from '@/components/user/OpenMap.vue'
import RealTimeCom from '@/components/user/RealTimeCom.vue'
import VideoMonitorCom from '@/components/admin/VideoMonitorCom.vue'
import ThingCom from '@/components/admin/ThingCom.vue'
import NoticeCom from '@/components/admin/NoticeCom.vue'
import ReportRoadCom from '@/components/user/road/ReportRoadCom.vue'
import ToolBoxCom from '@/components/user/ToolBoxCom.vue'
import UserManagement from '@/components/admin/UserManagement.vue'
import SearchThingCom from '@/components/user/SearchThingCom.vue'
import PopupCom from '@/components/user/PopupCom.vue'
import CatalogCom from '@/components/admin/CatalogCom.vue'
import InformationCom from '@/components/user/InformationCom.vue'

import { useMapgisStore } from '@/stores/mapgis'
const mapgis = useMapgisStore()

import { storeToRefs } from 'pinia'
import ManageUserPopup from '@/components/admin/manage/ManageUserPopup.vue'
import AddUserByAdmin from '@/components/admin/manage/AddUserByAdmin.vue'
import ChangeUserByAdmin from '@/components/admin/manage/ChangeUserByAdmin.vue'

import { useMapgisStore_zxh } from '@/stores/mapgis-zxh.js'
const { showManageUser,showAddUserByAdmin,showChangeUserByAdmin } = storeToRefs(useMapgisStore_zxh())
import AddNotice from '@/components/admin/AddNotice.vue'
// import InformationCom from '@/components/user/InformationCom.vue'
const $store = useMapgisStore()
</script>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
.header{
  font-size: 40px;

  font-weight: bold;
  text-align: center;
}
</style>
